<template>
    <div class="boxs">
        <a-tabs v-model:activeKey="activeKey" type="card" >
            <a-tab-pane key="img" tab="轮播图设置">
                <div style="padding: 20px;font-size: 25px;">
                    <a-form ref="formRef" name="advanced_search" class="ant-advanced-search-form" :model="formState"
                        @finish="onFinish">
                        <a-row :gutter="24">
                            <a-col :span="4">
                                <a-form-item name="username" label="发布人员">
                                    <a-input v-model:value="formState[`username`]" :placeholder="'请输入发布人员名称'"></a-input>
                                </a-form-item>
                            </a-col>
                            <a-col :span="6">
                                <a-form-item name="platform" label="技师端/客户端">
                                    <a-radio-group v-model:value="formState['platform']">
                                        <a-radio-button value="">全部</a-radio-button>
                                        <a-radio-button value="0">客户端</a-radio-button>
                                        <a-radio-button value="1">技术端</a-radio-button>
                                    </a-radio-group>
                                </a-form-item>
                            </a-col>
                            <a-col :span="6">
                                <a-form-item name="status" label="状态">
                                    <a-radio-group v-model:value="formState['status']">
                                        <a-radio-button value="">全部</a-radio-button>
                                        <a-radio-button value="0">正常</a-radio-button>
                                        <a-radio-button value="1">下架</a-radio-button>
                                    </a-radio-group>
                                </a-form-item>
                            </a-col>

                        </a-row>
                        <a-row>
                            <a-col :span="10" style="text-align: left">
                                <a-button type="primary" @click="adds">新增</a-button>

                            </a-col>
                            <a-col :span="14" style="text-align: right">
                                <a-button type="primary" html-type="submit">查询</a-button>
                                <a-button style="margin: 0 8px"
                                    @click="() => { formRef.resetFields(); onFinish() }">重置</a-button>

                            </a-col>
                        </a-row>
                    </a-form>
                    <a-table bordered :data-source="dataSource" :columns="columns"
                        :pagination="{ current, pageSize, total: totalCount }" @change="pageClick">
                        <template #bodyCell="{ column, text, record }">

                            <template v-if="column.dataIndex == 'image'">
                                <a-image :width="100" :heigth="100" :src='share.http + `/${record.dir}/${record.image}`' />
                            </template>
                            <template v-if="column.dataIndex === 'operation'">
                                <a-popconfirm :title="'真的要删除吗'"
                                    @confirm="deleTraffic(record.uid, record.image, record.dir)">
                                    <a :style="{ color: share.color, marginLeft: '15px' }">删除</a>
                                </a-popconfirm>
                                <span :style="{ marginLeft: '15px', color: share.color }" @click="xqModal(record)">详情</span>
                                <span :style="{ marginLeft: '15px', color: share.color }"
                                    @click="showModal(record)">修改</span>
                            </template>
                            <template v-if="column.dataIndex == 'status'">
                                <span style="color:green" v-if="record.status == 0">正常</span>
                                <span style="color:red" v-if="record.status == 1">下架</span>
                            </template>
                            <template v-if="column.dataIndex == 'platform'">
                                <span :style="{ color: share.color }" v-if="record.platform == 1">技师端</span>
                                <span :style="{ color: share.color }" v-if="record.platform == 0">客户端</span>
                            </template>

                        </template>
                    </a-table>
                </div>
                <!-- 轮播图新增 -->
                <a-modal v-model:visible="addModel" title="轮播图新增" :width="850" @ok="addOk" :destroyOnClose="true">
                    <a-form ref="addForm" :model="addFormState">
                        <a-form-item label="轮播图标题" name="title" :rules="[{ required: true, message: '请输入标题' }]">
                            <a-input v-model:value="addFormState.title" :maxlength="200" />
                        </a-form-item>

                        <a-form-item label="轮播图摘要" name="abstract" :rules="[{ required: true, message: '请输入摘要' }]">
                            <a-input v-model:value="addFormState.abstract" :maxlength="200" />
                        </a-form-item>

                        <a-form-item label="跳转链接" name="connection" :rules="[{ required: true, message: '请输入跳转链接' }]">
                            <a-input v-model:value="addFormState.connection" addon-before="Http://" />
                        </a-form-item>

                        <a-form-item name="platform" label="选择平台" :rules="[{ required: true, message: '请输入平台' }]">
                            <a-radio-group v-model:value="addFormState.platform">
                                <a-radio :value="0">客户端</a-radio>
                                <a-radio :value="1">技师端</a-radio>
                            </a-radio-group>
                        </a-form-item>

                        <a-form-item name="status" label="选择状态" :rules="[{ required: true, message: '请输入状态' }]">
                            <a-radio-group v-model:value="addFormState.status">
                                <a-radio :value="0">正常</a-radio>
                                <a-radio :value="1">下架</a-radio>
                            </a-radio-group>
                        </a-form-item>

                        <a-form-item label="轮播图" name="image">
                            <a-upload :fileList="fileListData" :maxCount="1" list-type="picture-card"
                                :beforeUpload="beforeUp">
                                <div>
                                    <plus-outlined />
                                    <div style="margin-top: 8px">Upload</div>
                                </div>
                            </a-upload>
                        </a-form-item>
                    </a-form>
                </a-modal>
                <!-- 轮播图修改 -->
                <a-modal v-model:visible="setModel" title="轮播图新增" :width="850" @ok="setOk" :destroyOnClose="true">
                    <a-form ref="setForm" :model="setFormState">
                        <a-form-item label="轮播图标题" name="title" :rules="[{ required: true, message: '请输入标题' }]">
                            <a-input v-model:value="setFormState.title" :maxlength="200" />
                        </a-form-item>

                        <a-form-item label="轮播图摘要" name="abstract" :rules="[{ required: true, message: '请输入摘要' }]">
                            <a-input v-model:value="setFormState.abstract" :maxlength="200" />
                        </a-form-item>

                        <a-form-item label="跳转链接" name="connection" :rules="[{ required: true, message: '请输入跳转链接' }]">
                            <a-input v-model:value="setFormState.connection" addon-before="Http://" />
                        </a-form-item>

                        <a-form-item name="platform" label="选择平台" :rules="[{ required: true, message: '请输入平台' }]">
                            <a-radio-group v-model:value="setFormState.platform">
                                <a-radio value="0">客户端</a-radio>
                                <a-radio value="1">技师端</a-radio>
                            </a-radio-group>
                        </a-form-item>

                        <a-form-item name="status" label="选择状态" :rules="[{ required: true, message: '请输入状态' }]">
                            <a-radio-group v-model:value="setFormState.status">
                                <a-radio value="0">正常</a-radio>
                                <a-radio value="1">下架</a-radio>
                            </a-radio-group>
                        </a-form-item>

                        <a-form-item label="轮播图" name="image">
                            <a-upload :fileList="fileListData" :maxCount="1" list-type="picture-card"
                                :beforeUpload="beforeUp">
                                <div>
                                    <plus-outlined />
                                    <div style="margin-top: 8px">Upload</div>
                                </div>
                            </a-upload>
                        </a-form-item>
                    </a-form>
                </a-modal>
                <!-- 轮播图详情 -->
                <a-modal v-model:visible="xqModel" title="优惠卷详情" :width="740" @ok="xqOk" :destroyOnClose="true">
                    <div class="xqBox">
                        <div class="title">标题:</div>
                        <span class="value">{{ xqData.title }}</span>

                        <div class="title">摘要:</div>
                        <span class="value" >{{ xqData.abstract }}</span>


                        <div class="title">状态:</div>
                        <span class="value" v-if="xqData.status == 0">正常</span>
                        <span class="value" v-if="xqData.status == 1">下架</span>


                        <div class="title">发布平台:</div>
                        <span class="value"  v-if="xqData.platform==0">客户端</span>
                        <span class="value"  v-if="xqData.platform == 1">技师端</span>


                        <div class="title" >发布人员</div>
                        <span class="value">{{ xqData.username }}</span>


                        <div class="title">跳转链接</div>
                        <span class="value" style="color:#333">{{ xqData.connection }}</span>


                        <div class="title">发布日期:</div>
                        <span class="value">{{ xqData.release_date}}</span>

                        <div class="title" style="width:20%">图片内容:</div>
                        

                        <a-image style="margin-left:20px;margin-top:5px;" :width="300" :heigth="100" :src='share.http + `/${xqData.dir}/${xqData.image}`' />

                    </div>
                </a-modal>
            </a-tab-pane>
            <a-tab-pane key="text" tab="文本广告设置">
                <div style='margin-bottom: 20px;'>
                    <bannerText></bannerText>
                </div>

            </a-tab-pane>
        </a-tabs>
    </div>
</template>


<script setup>
import { ref, onMounted, reactive } from 'vue'
import { imageAPI } from '../../../api/management';
import { useUserData } from '../../../stores/userData';
import { useRouter } from 'vue-router';
import share from '../../../util/commnet'
import { message } from 'ant-design-vue';
import { lbtAPI } from '../../../api/set'
import { PlusOutlined } from '@ant-design/icons-vue';
import bannerText from './bannerText.vue'
import {debounce} from 'lodash'
const activeKey = ref('img')
const uidData = ref('');
const router = useRouter();  //路由
const store = useUserData();    //pinia
const fileList = ref('');  //文件保存地

const fileListData = ref([])  //文件展示区

const dataSource = ref([{}]);

const beforeUp = f => {               //上传图片前
    fileList.value = f;
    fileListData.value = [{ url: URL.createObjectURL(f) }]
    return false;
}

const columns = [
    {
        title: '图片',
        dataIndex: 'image',
        width: "150px",
        align: 'center'

    }, {
        title: '发布平台',
        dataIndex: 'platform',
        align: 'center'

    }, {
        title: '状态',
        dataIndex: 'status',
        align: 'center'

    }, {
        title: "发布时间",
        dataIndex: 'release_date',
        align: 'center'

    }, {
        title: '发布人',
        dataIndex: 'username',
        align: 'center'

    }, {
        title: '操作',
        dataIndex: 'operation',
        align: 'center'

}];


const totalCount = ref(0);      //总条
const pageSize = ref(10);       //一页多少条
const current = ref(1);         //当前页
const formState = reactive({
    status: '',
    username: '',
    platform: ''
});
const formRef = ref('');  //查询的ref
const onFinish = async () => {  //当点击查询
    pageClick();

}

const debouncedPageClick = debounce(async (item) => {           //进行防抖
    item ? current.value = item.current : current.value = 1;
    let res = await lbtAPI(`selImg|${formState.platform}|${formState.status}|${formState.username}|${pageSize.value}|${current.value}|${store.data.token}|${store.data.uuid}|${store.data.phone}`);
    console.log(res);
    if (!res || res.code == 406) {                //验证账号状态
        router.replace({ name: 'login' });
        message.error("账号失效", 3)
        return;
    } else if (res.code != 200) {
        message.error(res.message);
        return
    }

    dataSource.value = res.data;
    totalCount.value = res.total - 0;
}, 300);

const pageClick = (item) => {       //页面变化刷新表格
    debouncedPageClick(item);
};


// 添加操作-----------------------------------------------------------------------
const addModel = ref(false); //新增广告图片
const addForm = ref(null);
const addFormState = reactive({
    connection: '',   //跳转链接
    abstract: '',    //摘要
    title: '',       //标题
    platform: 0,     //选择平台
    status: 0,       //状态
    image: ''        //图片名称
})
const adds = () => {
    addModel.value = true;
}

const addEnd = () => {
    fileListData.value = [];
    fileList.value = '';
    addFormState.connection = '';
    addFormState.abstract = '';
    addFormState.title = '';
    addFormState.platform = 0;
    addFormState.status = 0;
    addFormState.image = '';
    addModel.value = false;
}

const addOk = () => {      //当新增完成
    addForm.value.validateFields()
        .then(async res => {
            if (fileList.value) {  //当上传了文件
                let up = await imageAPI(`bannerAdd|${store.data.token}|${store.data.uuid}|${store.data.phone}`, fileList.value);   //进行图片上传操作
                if (up.code != 200) {
                    message.error(up.message);
                    return
                } else {
                    addFormState.image = up.file;
                }
                let addData = await lbtAPI(`add|${addFormState.title}|${addFormState.abstract}|${addFormState.image}|${addFormState.platform}|${addFormState.status}|${addFormState.connection}|${store.data.uid}|${store.data.token}|${store.data.uuid}|${store.data.phone}`);
                if (!addData || addData.code == 406) {                //验证账号状态
                    router.replace({ name: 'login' });
                    message.error("账号失效", 3)
                    return;
                } else if (addData.code != 200) {
                    message.error(res.message);
                    return
                }
                message.success("新增成功")
                pageClick();
                addEnd()
            } else {          //当没有上传文件
                message.error("没有上传图片")
                return;
            }
        })

}


// 修改操作-----------------------------------------------------------------
const setModel = ref(false); //新增广告图片
const setForm = ref(null);
const setFormState = ref({
    connection: '',   //跳转链接
    abstract: '',    //摘要
    title: '',       //标题
    platform: 0,     //选择平台
    status: 0,       //状态
    image: ''        //图片名称
})

const showModal = (item) => {
    console.log(item);
    setFormState.value = item;
    fileListData.value = [{ url: `${share.http}/${setFormState.value.dir}/${setFormState.value.image}` }]
    setModel.value = true;
}

const setEnd = () => {
    setFormState.value = {};
    fileList.value = '';
    fileListData.value = [];
    setModel.value = false;
}
const setOk = () => {
    setForm.value.validateFields().then(async res => {
        if (fileList.value) {  //当上传了文件
            let up = await imageAPI(`bannerSet|${setFormState.value.image}|${store.data.token}|${store.data.uuid}|${store.data.phone}`, fileList.value);   //进行图片上传操作
            if (up.code != 200) {
                message.error(up.message);
                return
            } else {
                setFormState.value.image = up.file;
            }
            let addData = await lbtAPI(`set|${setFormState.value.title}|${setFormState.value.abstract}|${setFormState.value.image}|${setFormState.value.platform}|${setFormState.value.status}|${setFormState.value.connection}|${store.data.uid}|${setFormState.value.uid}|${store.data.token}|${store.data.uuid}|${store.data.phone}`);
            console.log(addData);
            if (!addData || addData.code == 406) {                //验证账号状态
                router.replace({ name: 'login' });
                message.error("账号失效", 3)
                return;
            } else if (addData.code != 200) {
                message.error(res.message);
                return
            }
            pageClick();
            setEnd();
        } else {          //当没有上传文件
            let up = await imageAPI(`bannerNoSet|${setFormState.value.image}|${store.data.token}|${store.data.uuid}|${store.data.phone}`);   //进行图片上传操作
            if (up.code != 200) {
                message.error(up.message);
                return
            }
            let addData = await lbtAPI(`set|${setFormState.value.title}|${setFormState.value.abstract}|${setFormState.value.image}|${setFormState.value.platform}|${setFormState.value.status}|${setFormState.value.connection}|${store.data.uid}|${setFormState.value.uid}|${store.data.token}|${store.data.uuid}|${store.data.phone}`);
            console.log(addData);
            if (!addData || addData.code == 406) {                //验证账号状态
                router.replace({ name: 'login' });
                message.error("账号失效", 3)
                return;
            } else if (addData.code != 200) {
                message.error(res.message);
                return
            }
            pageClick();
            setEnd();
        }
    })
}


// 删除操作------------------------------------------------------------------
const deleTraffic = async (uid, img, dir) => {
    let res = await lbtAPI(`del|${uid}|${img}|${dir}|${store.data.token}|${store.data.uuid}|${store.data.phone}`);
    console.log(res);
    if (!res || res.code == 406) {                //验证账号状态
        router.replace({ name: 'login' });
        message.error("账号失效", 3)
        return;
    } else if (res.code != 200) {
        message.error(res.message);
        return
    }
    message.success(res.message);
    pageClick();
}

// 查看操作-----------------------------------------------------------------------
const xqModel = ref(false);
const xqData = ref({});
const xqOk = ()=>{
    xqModel.value = false;
}
const xqModal = (item)=>{
    xqModel.value = true;
    xqData.value = item;
}

onMounted(async () => {
    let res = await lbtAPI(`selImg||||${pageSize.value}|${current.value}|${store.data.token}|${store.data.uuid}|${store.data.phone}`);
    if (!res || res.code == 406) {                //验证账号状态
        router.replace({ name: 'login' });
        message.error("账号失效", 3)
        return;
    } else if (res.code != 200) {
        message.error(res.message);
        return
    }
    console.log(res);
    dataSource.value = res.data;
    totalCount.value = res.total - 0;
})

</script>


<style scoped src="../../css/set/homeBanner.scss" />
